<template>
	<view class="page">

		<view class="page-container">


			<view class="base mar-bottom66">
				<view class="flex align-center mar-left33 mar-right33" @click="()=>{!baseMore?handleClickLoadMore(defaultFa):(baseMore = false) }" >
					<u-icon v-if="!baseMore" name="arrow-down" size="14"
						color="#999999" labelPos="left" labelSize="14"></u-icon>
					<u-icon v-else name="arrow-up" size="14" color="#999999" labelPos="left"
						labelSize="14"></u-icon>
					<view class="cr-333 font_s32 font_w500 mar-left12">默认收藏夹</view>
					<view class="font_s26 cr-999 mar-left15"><text class="mar-right6">·</text>
						<text
							v-if="defaultFa&&defaultFa.children&&defaultFa.children.length">{{defaultFa.children.length}}</text>
						<text v-else>0</text>
					</view>
				</view>
				<view class="menu-box" v-if="baseMore&&defaultFa&&defaultFa.children">
					<view class="menu-item" v-for="item in defaultFa.children" :key="item.id" >
						<view class=" mar-bottom23 flex justify-between align-center">
							<view class="font_s26 cr-333" @click="handleJump(item)"> {{item.contentItemName}}</view>
							<view class="action-btn-box">
								<u-tooltip @click="(index)=>{handleClickChildrenTip(item,defaultFa,index)}"
									:ref="defaultFa.id+'_'+item.id" class="tip" :buttons="['删除','转发','移动到收藏夹']"
									bgColor="#e3e4e6" :showCopy="false"></u-tooltip>
								<u-icon class="tip-icon" @click.stop="handleShowTip(defaultFa.id+'_'+item.id)"
									style="transform: rotateZ(270deg);" name="more-dot-fill"></u-icon>
							</view>
						</view>

						<view class="font_s24 cr-999" @click="handleJump(item)"> 收藏时间 {{item.createTime}} </view>

					</view>
				</view>
			</view>
			<view class="base mar-bottom66">
				<view class="flex align-center justify-between mar-left33 mar-right33">
					<view class="flex align-center" @click="myMore = !myMore">
						<u-icon v-if="!myMore" name="arrow-down" size="14" color="#999999"
							labelPos="left" labelSize="14"></u-icon>
						<u-icon  v-else name="arrow-up" size="14" color="#999999" labelPos="left"
							labelSize="14"></u-icon>
						<view class="cr-333 font_s32 font_w500 mar-left12">我创建收的藏夹</view>
						<view class="font_s26 cr-999 mar-left15"><text class="mar-right6">·</text>{{customFa.length}}
						</view>
					</view>
					<view @click="handleShowCollctPopup(true)">
						<image src="https://www.worldintek.com:39011/yaolexue-service/icon_add.png" class="w-21 h-21">
						</image><text class="cr-999 font_s24 mar-left10"> 新建收藏夹</text>
					</view>
				</view>
				<view v-if="myMore&&customFa.length" class="menu-box">
					<view class="menu-item" v-for="item in customFa" :key="item.id">
						<view class=" flex justify-between align-center">
							<view class="flex align-center flex1" @click="handleClickToSubPage(item)">
								<image src="https://www.worldintek.com:39011/yaolexue-service/icon_fa.png"
									class="w-47 h-40"></image>
								<view class="font_s26 cr-333 mar-left31"> {{item.favoritesName}} </view>
							</view>
							<view class="action-btn-box">
								<u-tooltip @click="(index)=>{handleClickTip(item,index)}" :ref="item.id" class="tip"
									:buttons="['编辑','转发 ','删除']" bgColor="#e3e4e6" :showCopy="false"></u-tooltip>
								<u-icon class="tip-icon" @click.stop="handleShowTip(item.id)" name="more-dot-fill"></u-icon>
							</view>
						</view>


					</view>
				</view>
			</view>

		</view>

		<!-- 	<u-popup :show="showCeateCollectPopup" mode="center" @close="handleShowCollctPopup(false)" closeable>
		<view class="his-pop padd-top30 padd-left32 padd-right32">
			<view class="font_s28 cr-333 mar-bottom31">创建收藏夹</view>
			<view class="content padd-bottom30">
				<view class="flex mar-bottom19 ">
					<u-input type="text" v-model="favoritesName" placeholder="请输入收藏夹名称"></u-input>
				</view>
				<u-button type="primary" text="确定" @click="handleConfirmFavorites"></u-button>
			</view>
		</view>
	</u-popup> -->
		<t-favoritespop :show='showFavoritesPopup' :list='favoritesList' :faChild='computedFaChild'
			@close='()=>{handleShowFaPopup(false);init()}'></t-favoritespop>
		<t-collectpop :show='showCeateCollectPopup' :favorites='activeFavorites'
			@close="()=>{handleShowCollctPopup(false);init()}"></t-collectpop>
		<!-- 	<u-popup
	class="favorites-popup"
	  :show="showFavoritesPopup"
	  mode="bottom"
	  @close="handleUpdateContentCollectionStatus"
	  
	>
	  <view class="favorites-pop padd-top30 padd-left32 padd-right32">
	    <view class="flex justify-between mar-bottom31">
			<view class="font_s28 cr-333 font_w500 ">
				选择收藏夹
			</view>
			<view class="font_s24 cr-999" @click="handleShowCollctPopup(true)">
				<image src="/static/img/icon_add.png" mode="" class="w-21 h-21 mar-right10"></image>
				新建收藏夹
			</view>
		</view>
	    <view class="content ">
	      <view class=" mar-bottom19 item" v-for="item in favoritesList">
			 <radio-group  @change="radioChange">
						<label class="flex justify-between"  >
							
							<view>
								<view class="cr-333 font_s26 mar-bottom17">
									{{item.favoritesName}}
								</view>
								<view class="cr-999 font_s24">
									10个内容
								</view>
							</view>
							<view>
								<radio  :value="`${item.id}`" :checked="activeFavorites?activeFavorites.id==item.id:false" />
							</view>
						</label>
					
			</radio-group>
	      </view>
	    </view>
	  </view>
	</u-popup> -->
	
			<u-popup :show="showShareQrcodePopup" mode="center" @close="handleShowShareQrcodePopup(false)" closeable>
		<view class="his-pop padd-top30 padd-left32 padd-right32">
			<view class="font_s28 cr-333 mar-bottom31">分享</view>
			<view class="content padd-bottom30">
					<image show-menu-by-longpress style="width: 100%;" :src="shareQrcodeUrl" mode='aspectFit'></image>
					<view style="text-align: center;" class="mar-top10 mar-bottom10"> 长按图片分享</view>
			</view>
		</view>
	</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseMore: false,
				myMore: false,
				showFavoritesPopup: false,
				showCeateCollectPopup: false,
				showShareQrcodePopup:false,
				favoritesList: [],
				favoritesName: '',
				activeFavorites: null,
				faChild: null,
shareQrcodeUrl:''
			};
		},
		onLoad(payload) {
			this.init()
		},
		computed: {
      computedFaChild(){
        if(this.faChild)return {...this.faChild,id:this.faChild.contentItemId}
      },
			defaultFa() {
				return this.favoritesList.find(item => item.defaultStatus)
			},
			customFa() {
				return this.favoritesList.filter(item => !item.defaultStatus)
			}
		},
		onShareAppMessage(res) {
			console.log(res,url,this.faChild)
			let url = ''
			switch (this.faChild.contentItemType) {
				case 1:
					url = `imgtxtDetails/imgtxtDetails?id=${this.faChild.contentItemId}`
					break;
				case 2:
					url = `VideoItemDetail/VideoItemDetail?id=${this.faChild.contentItemId}`
					break;
				case 3:
					url = `AudioItemList/AudioItemList?id=${this.faChild. albumId}&cid=${this.faChild.contentItemId}`
					break;
				default:
					break;
			}
			return {
				title: this.faChild.contentItemName,
				path: `/pages/${url}`
			}
		},
		methods: {
      handleJump(item){
        if(item.deleteStatus){
          uni.showToast({
            title:'内容已删除',
            icon:'none'
          })
          return
        }
        if(!item.publishStatus){
          uni.showToast({
            title:'内容已下架',
            icon:'none'
          })
          return
        }
        let url = ''
        switch(item.contentItemType){
        	case 1:
        	 url = `/pages/imgtxtDetails/imgtxtDetails?id=${item.contentItemId}`
        	break;
        	case 2:
        		url = `/pages/VideoItemDetail/VideoItemDetail?id=${item.contentItemId}`
        	break;
        	case 3:
        		url = `/pages/AudioItemList/AudioItemList?id=${item.albumId}&cid=${item.contentItemId}`
        	break;
        }
        uni.navigateTo({
        	url
        })
      },
			init() {
				this.getUserFavorites()
			},
			//更新收藏夹
			handleUpdateContentCollectionStatus(collectionStatus = 1) {
				this.handleShowFaPopup(false)
				this.handleShowCollctPopup(false)
				const collectionParams = {
					collectionStatus: collectionStatus,
					contentItemId: this.faChild.id,

				}
				if (this.activeFavorites) {
					collectionParams.userFavoritesId = this.activeFavorites.id
				}
				return this.$http.put(
					`/yaolexue-service-portal/contentItem/updateContentCollectionStatus`, collectionParams, {
						isNeedLoading: true
					}).then(res => {

					if (res.code === 200) {
						this.init()
					}
				})
			},
			//获取二维码
			createShareQrCode(id) {
				return this.$http.get(
					`/yaolexue-service-portal/userFavorites/shareFavoritesCode/${id}`, {}, {
						isNeedLoading: true
					}).then(res => {
					if(res){
						this.shareQrcodeUrl='data:image/jpeg;base64,'+res.data
						this.showShareQrcodePopup=true
					}
					
				})

			},
		
			handleShowShareQrcodePopup(show){
				this.showShareQrcodePopup=show
				if(!show){
					this.shareQrcodeUrl=''
				}
			},
			//点击收藏夹子项tip
			handleClickChildrenTip(faChild, faParent, clickTypeIndex) {
				this.faChild = faChild
				if (clickTypeIndex === 0) {
					//删除不需要带userFavoritesId
					this.handleUpdateContentCollectionStatus(0)
				}
				if (clickTypeIndex === 1) {
					//转发

				}
				if (clickTypeIndex === 2) {
					//移动收藏夹
					this.activeFavorites = faParent
					this.handleShowFaPopup(true)
				}
			},
			//点击收藏夹tip
			handleClickTip(faParent, clickTypeIndex) {
				this.activeFavorites = faParent
				if (clickTypeIndex === 0) {
					//编辑
					this.handleShowCollctPopup(true)
					this.favoritesName = faParent.favoritesName
				}
				if (clickTypeIndex === 1) {
					//转发
					this.createShareQrCode(faParent.id)
				}
				if (clickTypeIndex === 2) {
					//删除收藏夹
					this.handleDelUserFavoritesById()
				}
			},
			//点击加载收藏夹子项
			handleClickLoadMore(faObj) {

				this.baseMore = true
				this.getFaChildren(faObj)

			},
			//加载收藏夹子项

			getFaChildren(faObj) {
				const targetIndex = this.favoritesList.findIndex(item => item.id === faObj.id)
				this.favoritesList.splice(targetIndex, 1, {
					...this.favoritesList[targetIndex],
					children: []
				})
				return this.$http.get(
					`/yaolexue-service-portal/userFavorites/findUserFavoritesItemById/${faObj.id}`, {}, {
						isNeedLoading: true
					}).then(res => {
					this.favoritesList.splice(targetIndex, 1, {
						...this.favoritesList[targetIndex],
						children: res.data
					})
				})
			},
			//获取收藏夹
			getUserFavorites() {
				return this.$http.get(
					`/yaolexue-service-portal/userFavorites/findUserFavorites`, {}, {
						isNeedLoading: true
					}).then(res => {
					this.favoritesList = res.data
					// this.activeFavorites = res.data.find(item => item.defaultStatus) || res.data[
					// 	0] //这里不能这样是因为有很多地方会操作activeFavorites
					this.getFaChildren(this.defaultFa)
				})

			},
			// //添加收藏夹
			// handleAddUserFavorites(){

			// 	return this.$http.post(
			// 		`/yaolexue-service-portal/userFavorites/addUserFavorites`, {
			// 			favoritesName:this.favoritesName,
			// 		}, {
			// 			isNeedLoading: true
			// 		}).then(res=>{
			// 			if(res.code===200){
			// 				this.handleShowCollctPopup(false)
			// 				this.init()
			// 			}
			// 		})
			// },
			// //收藏夹编辑确定
			// handleConfirmFavorites(){
			// 	if(this.activeFavorites){
			// 		this.handleUpdateUserFavorites()
			// 	}else{
			// 		this.handleAddUserFavorites()
			// 	}
			// },
			// //修改收藏夹
			// handleUpdateUserFavorites(){
			// 	return this.$http.put(
			// 		`/yaolexue-service-portal/userFavorites/updateUserFavorites`, {
			// 			favoritesName:this.favoritesName,
			// 			id:this.activeFavorites.id
			// 		}, {
			// 			isNeedLoading: true
			// 		}).then(res=>{
			// 			if(res.code===200){
			// 				this.handleShowCollctPopup(false)
			// 				this.init()
			// 			}
			// 		})
			// },
			//删除文件夹
			handleDelUserFavoritesById() {
				return this.$http.delete(
					`/yaolexue-service-portal/userFavorites/delUserFavoritesById/${this.activeFavorites.id}`, {}, {
						isNeedLoading: true
					}).then(res => {
					if (res.code === 200) {
						this.init()
					}
				})
			},

			//选择收藏夹
			radioChange(evt) {
				this.activeFavorites = this.favoritesList.find(item => item.id + '' === evt.detail.value)

			},
			//显示收藏夹弹窗
			handleShowFaPopup(flag) {
				if (flag) {
					// this.getUserFavorites()//外部已经加载过一次了
					this.activeFavorites = this.favoritesList.find(item => item.defaultStatus) || this.favoritesList[
						0] //这里不能这样是因为有很多地方会操作activeFavorites
				} else {
					this.activeFavorites = null
				}
				this.showFavoritesPopup = flag;
			},
			handleShowTip(id) {
				if (this.$refs[id]) {
					this.$refs[id][0].longpressHandler()
				}
			},
			handleShowCollctPopup(flag) {

				this.showCeateCollectPopup = flag;
				this.favoritesName = ''
			},

			handleClickToSubPage(item) {
				const query = Object.keys(item)
					.map(key => encodeURIComponent(key) + '=' + encodeURIComponent(item[key]))
					.join('&');
				uni.navigateTo({
					url: '/pages/CollectCustomlist/CollectCustomlist?' + query
				})
			}

		},
	};
</script>

<style lang="scss">
	.page {
		padding: 47rpx 0;
		box-sizing: border-box;
	}

	.base {
		.menu-box {
			width: 689rpx;
			background: #FFFFFF;
			margin: 20rpx auto;

			.menu-item {
				width: 100%;
				padding-bottom: 30rpx;
				padding-top: 30rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid rgba(240, 240, 240, 0.8);
			}
		}
	}

	.action-btn-box {
		position: relative;

		.u-icon {
			transform: rotateZ(270deg);
			color: #999999 !important;
		}

		.tip,
		.u-tooltip {
			position: absolute;
			top: 0;
			left: 0;
			/* z-index: -1; */
			width: 50%;
			/* opacity: 0; */
			/* overflow: hidden; */
		}

		.tip-icon {
			.u-icon__icon {
				transform: rotateZ(270deg);
				color: #999999 !important;
			}
		}
	}

	.his-pop {
		.content {
			width: 400rpx;
		}
	}


	.createcollect-pop {
		width: 400rpx;


	}
</style>